<template>
  <div class="loginComponent">
    <div class="box">
      <div class="form">
        <div class="loginTitleBox">
          <div class="loginTitle justify-text">用户登录</div>
        </div>
        <!--      label-width="80px"-->
        <el-form ref="loginForm" :model="form" :rules="loginRules">
          <!--        <el-form-item label="用户名" class="justify-text">-->
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <!--        <el-form-item label="密码" class="justify-text">-->
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code" class="codeItem">
            <el-input
              v-model="form.code"
              placeholder="请输入验证码"
              :class="iconColor"
              @input="checkCaptchaCode"
              :prefix-icon="icon"
            ></el-input>
            <img :src="imgSrc" title="看不清换一张？" alt="图形验证码" @click="getImgCode">
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="loginBtn"
            >登录
            </el-button
            >
          </el-form-item>
        </el-form>

      </div>
      <div class="foot clearFix">
        <ul class="threeIcon clearFix">
          <li><img src="../../../assets/login/qq.png" alt="QQ登录" title="QQ登录"></li>
          <li><img src="../../../assets/login/wechat.png" alt="微信登录" title="微信登录"></li>
        </ul>
        <p class="clearFix">没有账号？<span @click="registerMethod">去注册</span></p>
      </div>
    </div>
  </div>
</template>

<script>
  import sessionUtil from '../../../utils/sessionUtil'

  export default {
    name: 'login',
    data () {
      return {
        form: {
          username: '',
          password: '',
          code: ''
        },
        identifying: '',
        imgSrc: '',
        iconColor: 'code',
        icon: 'el-icon-success',
        flag: false,
        loginRules: {
          username: [
            {required: true, message: '请输入用户名', triggr: blur},
            {min: 2, max: 15, message: '长度在2到15个字符', triggr: blur}
          ],
          password: [
            {required: true, message: '请输入密码', triggr: blur},
            {min: 6, max: 20, message: '长度在6到20个字符', triggr: blur}
          ],
          code: [
            {required: true, message: '请输入验证码', triggr: blur},
          ]
        }
      }
    },
    methods: {
      onSubmit () {
        this.$refs.loginForm.validate(async (flag) => {
          if (flag) {
            if (!this.flag) {
              this.$message.error('请输入正确的验证码')
              return
            }
            // qs.stringify() qs.stringify()的作用在于将对象格式的数据转换成username=admin&password=admin这种格式，而这种格式也正是表单的格式，因此前后端的数据格式的交互就一致了
            this.$dataUtils.userLogin(this.form).then((res) => {
              if (res.data.code !== 200) {
                this.$message({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error'
                })
              } else {
                sessionUtil.session.set('token', res.data.data.token.accessToken)
                sessionUtil.session.set('user', res.data.data.user)
                this.$message({
                  showClose: true,
                  message: '登录成功',
                  type: 'success'
                })
                this.$store.commit('setUserSession')
                this.$router.push({path: '/home'})
              }
              // eslint-disable-next-line handle-callback-err
            }, (err) => {
              this.$message({
                showClose: true,
                message: '服务器异常',
                type: 'error'
              })
            })
          }
        })
      },
      init () {
        let msg = sessionStorage.getItem('msg')
        if (msg) {
          this.$message({
            showClose: true,
            message: msg,
            type: 'error'
          })
        }
        // sessionStorage.setItem('msg','');
        sessionStorage.removeItem('msg')
      },
      registerMethod () {
        this.$router.push({path: '/register'})
        return false
      },
      checkCaptchaCode () {
        let params = {
          captcha: this.form.code,
          identifying: this.identifying
        }
        this.$dataUtils.checkCaptchaCode(params).then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.icon = 'el-icon-success'
            this.iconColor = 'code green'
            this.flag = true
          } else {
            this.icon = 'el-icon-error'
            this.iconColor = 'code red'
            this.flag = false
          }
        }, (err) => {
          this.$message.error('服务器异常')
          this.flag = false
        })
      }, getImgCode () {
        let params = {
          identifying: this.identifying
        }
        this.$dataUtils.getCaptchaCode(params).then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.imgSrc = 'data:image/jpeg;base64,' + res.data.data.imgsrc
            this.identifying = data.data.identifying
          } else {
            this.$message.error(data.msg)
          }
        }, (err) => {
          this.$message.error('服务器异常')
        })
      },
    },
    mounted () {
      this.init()
      this.getImgCode()
    }
  }
</script>

<style lang="less" scoped>
  .loginComponent {
    background: url('../../../assets/login/loginBackgroud.png') no-repeat;
    background-size: cover;
    height: 100%;
    position: relative;
  }

  .box {
    border-radius: 5% 5%;
    background: white;
    width: 300px;
    padding: 2%;
    position: absolute;
    left: 38%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .form {
    padding: 0 4%;
  }

  .foot {
    padding: 0 4%;
    font-size: 12px;
    color: #553f34;
    height: 50px;
  }

  .foot span {
    text-decoration: underline;
    cursor: pointer;
  }

  .foot p {
    float: right;
    line-height: 25px;
  }

  .justify-text {
    display: inline-block;
    text-align-last: justify;
  }

  .loginTitle {
    width: 140px;
    margin-bottom: 20px;
    font-size: 20px;
    color: #553f34;
  }

  .loginTitleBox {
    text-align: center;
  }

  .loginBtn {
    width: 100%;
    background: #553f34;
  }

  .threeIcon {
    list-style: none;
    float: left;
    padding: 0;
  }

  .threeIcon li {
    margin-right: 8px;
    float: left;
  }

  .threeIcon li img {
    width: 28px;
    height: 28px;
  }

  .code {
    width: 70%;
  }

  .codeItem img {
    width: 25%;
    height: 40px;
    float: right;
  }

  .green /deep/ .el-input__icon {
    color: green;
  }

  .red /deep/ .el-input__icon {
    color: red;
  }

</style>
